<template>
	<view class="splash-container" v-if="visible">
		<!-- 广告图片 -->
		<view class="ad-content">
			<image :src="adImage" class="ad-image" mode="aspectFill" @click="handleAdClick"></image>

			<!-- 广告信息条 -->
			<view class="ad-label">广告</view>

			<!-- 跳过按钮 -->
			<view class="skip-button" @click="handleSkip">
				<text v-if="countdown > 0">跳过 {{ countdown }}s</text>
				<text v-else>跳过</text>
			</view>

			<!-- 关闭按钮 (可选) -->
			<view class="close-button" @click="handleClose">
				<u-icon name="close" color="#fff" size="24"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'SplashAd',
		props: {
			// 是否显示开屏广告
			visible: {
				type: Boolean,
				default: false
			},
			// 广告图片地址
			adImage: {
				type: String,
				default: 'https://img.jingkakeji.com/img/static/kaixiang.png'
			},
			// 广告链接
			adLink: {
				type: String,
				default: ''
			},
			// 倒计时时间(秒)
			duration: {
				type: Number,
				default: 5
			}
		},
		data() {
			return {
				countdown: this.duration,
				timer: null
			}
		},
		created() {
			if (this.visible) {
				this.startCountdown()
			}
		},
		// watch: {
		// 	visible(newVal) {

		// 	}
		// },
		methods: {
			// 开始倒计时
			startCountdown() {
				this.countdown = this.duration
				this.clearTimer()

				this.timer = setInterval(() => {
					this.countdown--
					if (this.countdown <= 0) {
						this.handleClose()
					}
				}, 1000)
			},

			// 清除定时器
			clearTimer() {
				if (this.timer) {
					clearInterval(this.timer)
					this.timer = null
				}
			},

			// 处理跳过
			handleSkip() {
				this.clearTimer()
				this.$emit('close', {
					type: 'skip'
				})
			},

			// 处理关闭
			handleClose() {
				this.clearTimer()
				this.$emit('close', {
					type: 'close'
				})
			},

			// 处理广告点击
			handleAdClick() {
				if (this.adLink) {
					// 如果是内部页面
					if (this.adLink.startsWith('/pages/')) {
						uni.navigateTo({
							url: this.adLink
						})
					}
					// 如果是外部链接
					else if (this.adLink.startsWith('http')) {
						uni.navigateTo({
							url: `/pages/webview/webview?url=${encodeURIComponent(this.adLink)}`
						})
					}
				}
				this.handleClose()
			}
		},
		beforeDestroy() {
			this.clearTimer()
		}
	}
</script>

<style scoped>
	.splash-container {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		z-index: 99999;
		background-color: #000;
	}

	.ad-content {
		width: 100%;
		height: 100%;
		position: relative;
	}

	.ad-image {
		width: 100%;
		height: 100%;
	}

	.ad-label {
		position: absolute;
		top: 20rpx;
		left: 20rpx;
		padding: 5rpx 15rpx;
		background-color: rgba(0, 0, 0, 0.5);
		color: #fff;
		font-size: 24rpx;
		border-radius: 20rpx;
	}

	.skip-button {
		position: absolute;
		top: 30rpx;
		right: 30rpx;
		padding: 10rpx 20rpx;
		background-color: rgba(0, 0, 0, 0.5);
		color: #fff;
		font-size: 26rpx;
		border-radius: 30rpx;
	}

	.close-button {
		position: absolute;
		bottom: 40rpx;
		right: 40rpx;
		width: 60rpx;
		height: 60rpx;
		background-color: rgba(0, 0, 0, 0.5);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>